<template>
    <view class="page_box  ">
        <u-navbar :is-back="false" title="信泰超级玛丽4号重疾险" v-if="1" :border-bottom="false"></u-navbar>

        <view class="content_box">
            <view class="ww100 h580">
                <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605100849.png" mode="aspectFill" class="ww100 h580"></image>
            </view>
            <view class="ww100 h276 u-relative">
                <text class=" text-black f50 text-bold mt30 ml50 block">信泰超级玛丽4号重疾险</text>
                <view class="img bg-img w143 h148 flex align-end justify-center"><text class="f38 text-white mb10">海报</text></view>
            </view>
            <view class="h25 hen"></view>
            <view class=" pt20 pr24 pb90 pl6">
                <view class="flex align-center">
                    <text class="block w14 h49 bg-red"></text>
                    <view class=" ml30 flex flex-direction ww100"><text class="f50 text-black text-bold">保障责任</text></view>
                </view>

                <block v-for="(item, index) in list" :key="index">
                    <view class="mt48 flex-direction ml50">
                        <view class="flex align-center justify-between ww100" @click="click(index)">
                            <text class="f42 text-black text-bold">{{ item.a }}</text>
                            <view class="flex">
                                <text class="f42 text-red">{{ item.b }}</text>
                                <i class="cuIcon-fold ml25" v-if="index == c"></i>
                                <i class="cuIcon-unfold ml25 " v-else></i>
                            </view>
                        </view>
                        <text class="f38 text-gray block mt30 mb30" v-if="index == c">{{ item.c }}</text>
                    </view>
                </block>
            </view>
            <view class="h25 hen"></view>
            <view class="pt20 pr24  pl6">
                <view class="flex align-center">
                    <text class="block w14 h49 bg-red"></text>
                    <view class=" ml30 flex flex-direction ww100"><text class="f50 text-black text-bold">投保须知</text></view>
                </view>

                <block v-for="(item, index) in listOne" :key="index">
                    <view class="mt48 flex-direction ml50">
                        <view class="flex  justify-between ww100">
                            <text class="f42 text-black text-bold">{{ item.a }}</text>
                            <view class="flex ww80 flex justify-end align-">
                                <text class="f42 text-red">{{ item.b }}</text>
                            </view>
                        </view>
                    </view>
                </block>
            </view>
            <view class="solid mt60"></view>
            <view class="pr24 pb90 pl6">
                <view class="ml50 f35 flex mt120">
                    <text class="text-black " style="white-space: nowrap;">更多请查看</text>

                    <text class="text-red flex ">
                        <text @click="showPopup = !showPopup">《投保须知》、</text>
                        <text @click="showPopupjia = !showPopupjia">《2021年6月11日10:45:22》、</text>

                        <text @click="showPopupIns = !showPopupIns">《保险条款及告知》</text>
                        、
                        <text @click="l.to('/pages/index/hlthNotice')">《健康告知》</text>
                    </text>
                </view>
                <view class="ml50 mt48 flex justify-between align-center" @click="showPopupOne = !showPopupOne">
                    <text class="cu-tag bg-red light f33 sm">该产品由信泰人寿保险股份有限公司承保</text>
                    <i class="text-red cuIcon-right"></i>
                </view>
            </view>

            <view class="h25 hen"></view>
            <view class="">
                <view class="flex align-center pt20 pr24 pb50 pl6">
                    <text class="block w14 h49 bg-red"></text>
                    <view class=" ml30 flex flex-direction ww100"><text class="f50 text-black text-bold">产品介绍</text></view>
                </view>
                <view class="imgOne">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101423.png" mode="aspectFill"></image>
                </view>
                <view class="imgTwo">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101545.png" mode="aspectFill"></image>
                </view>
                <view class="imgThree">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101758.png" mode="aspectFill"></image>
                </view>
                <view class="imgFour">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101824.png" mode="aspectFill"></image>
                </view>
                <view class="imgFive">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101858.png" mode="aspectFill"></image>
                </view>
                <view class="imgSix ">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101920.png" mode="aspectFill"></image>
                </view>
                <view class="imgSeven ">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101934.png" mode="aspectFill"></image>
                </view>
                <view class="imgEight ">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605101950.png" mode="aspectFill"></image>
                </view>
                <view class="imgnine ">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605102004.png" mode="aspectFill"></image>
                </view>
                <view class="imgten ">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605102015.png" mode="aspectFill"></image>
                </view>
                <view class="flex align-center justify-center mt23 mb70">
                    <text class="cu-tag w407 h80 bg-grey light round text-bold">绿通服务说明</text>
                </view>
                <view class="imgeleven ">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210605102033.png" mode="aspectFill"></image>
                </view>
                <view class="flex justify-center align-center  pt21 pl44 pr44 pb143 ww100">
                    <view class="ww100 h548 imgg bg-img flex  flex-direction">
                        <view class="flex justify-center"><text class="block text-center center f44">了解信泰人寿保险股份有限公司</text></view>
                        <view class=" f42 padding" style="color: #4A4A4A; line-height: 36.6rpx;">
                            信泰人寿保险股份有限公司创立于2007年5月18日，总部 设在浙江杭州，公司注册资本50亿元。公司已先后开设浙
                            江、江苏、北京、河北、福建、河南、山东、黑龙江、辽 宁、上海、湖北、江西、宁波、广东、厦门、青岛、深圳、
                            大连等18家分公司，下辖营业网点250余家，经营区域基 本覆盖国内经济发展最为活跃的重点区域。
                        </view>
                    </view>
                </view>
            </view>
            <view class="h25 hen"></view>
            <view class="pt70 pr24 pb90 pl6">
                <view class="flex align-center">
                    <text class="block w14 h49 bg-red"></text>
                    <view class=" ml30 flex flex-direction ww100"><text class="f50 text-black text-bold">常见问题</text></view>
                </view>
                <view class="commonProblem">
                    <view v-for="(item, index) in listThree" :key="index">
                        <view class="flex flex-direction f42 mb50" v-if="!seeMore && index < 3">
                            <text class="text-red">{{ item.a }}</text>
                            <text class="mt20">{{ item.b }}</text>
                        </view>
                        <view class="flex flex-direction f42 mb50" v-if="seeMore">
                            <text class="text-red">{{ item.a }}</text>
                            <text class="mt20">{{ item.b }}</text>
                        </view>
                    </view>
                </view>

                <view class="ww100 h122  bg-gray flex align-center justify-center" @click="seeMore = true" v-if="!seeMore">
                    <text class="text-gray">查看更多</text>
                    <i class="cuIcon-unfold text-gray ml10"></i>
                </view>
            </view>
            <view class="h25 hen"></view>
            <view class="pt70 pr24 pb90 pl6">
                <view class="flex align-center">
                    <text class="block w14 h49 bg-red"></text>
                    <view class=" ml30 flex flex-direction ww100"><text class="f50 text-black text-bold">理赔服务</text></view>
                </view>
                <view class="commonProblem">
                    <view class="flex justify-between align-center" @click="showPopupOne = !showPopupOne">
                        <text class="cu-tag bg-red light sm ">该产品由信泰人寿保险股份有限公司承保</text>
                        <i class="text-red cuIcon-right"></i>
                    </view>

                    <view class="flex justify-center mt68 mb88"><text class="f42 text-black text-bold">理赔步骤</text></view>
                    <view class="flex justify-between align-center">
                        <view class="flex flex-direction align-center ">
                            <image src="../../static/11111111.png" mode="aspectFill" class="w103 h103 round"></image>
                            <text class="f33 text-gray mt35">依据理赔指引报案</text>
                        </view>
                        <i class="cuIcon-right" style="margin-top: -50rpx;"></i>
                        <view class="flex flex-direction align-center">
                            <image src="../../static/11111113.png" mode="aspectFill" class="w103 h103 round"></image>
                            <text class="f33 text-gray mt35">准备素材</text>
                        </view>
                        <i class="cuIcon-right" style="margin-top: -50rpx;"></i>
                        <view class="flex flex-direction align-center">
                            <image src="../../static/11111114.png" mode="aspectFill" class="w103 h103 round"></image>
                            <text class="f33 text-gray mt35">保险公司审核</text>
                        </view>
                        <i class="cuIcon-right" style="margin-top: -50rpx;"></i>
                        <view class="flex flex-direction align-center">
                            <image src="../../static/11111112.png" mode="aspectFill" class="w103 h103 round"></image>
                            <text class="f33 text-gray mt35">进取理赔金</text>
                        </view>
                    </view>
                </view>
                <view class="flex justify-center mt87 mb107 align-center" @click="l.to('/pages/index/claimsManual')">
                    <text class="w292 h76 text-red f42 soli flex align-center justify-center  text-center round block" style="line-height: 1;">
                        查看理赔手册
                    </text>
                </view>
            </view>
            <view class="h50"></view>
            <view class="ww100 h182 align-center footer flex bg-white">
                <view class="left flex flex-direction justify-center align-center" @click="l.to('/pages/index/productInfo')">
                    <image src="../../static/6363.png" mode="aspectFill" class="w69 h88"></image>
                    <text class="f33 text-gray">产品资料</text>
                </view>
                <view class="right f-1 ww100 flex justify-around">
                    <view class="flex align-center">
                        <text class="f58 text-bold">保费:</text>
                        <text class="f58 text-red text-bold">199.5元</text>
                        <text class="f58 text-bold">起</text>
                    </view>
                    <view class="w498 h123 reddx flex justify-around align-center">
                        <view class="f50 text-red text-bold f-1 flex justify-center">转给客户</view>
                        <view
                            class="f50 text-white  bg-red text-bold f-1 flex justify-center h123 line align-center"
                            @click="l.to('/pages/index/home')"
                            style="line-height: 1;"
                        >
                            立即投保
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 投保提示 -->
        <u-popup v-model="showPopup" mode="bottom" border-radius="14" length="80%" :closeable="true">
            <view class="box padding flex flex-direction align-center ">
                <text class="text-bold text-black f53">投保提示</text>
                <view class="mt30">
                    <view class="f42 text-red padding-sm bg-pink text-bold radius" style="background: #FEF3F3;">
                        即将进入投保环节，请您详细了解产品责任仔细阅读保险条款 等有关信息，为保护您的合法权益，您的投保过程将会被记录，
                        请知悉。本产品由信泰人寿保险股份有限公司承保。
                    </view>
                </view>
                <scroll-view scroll-y="true" class="scroll mt50 mb100">
                    <view class="f45 text-black">
                        <text>
                            敬的客广： \n 感谢您通过 有限公司办理保险业 。\n 为了您的合法权益得到有效保护，按照监管规定的要求，本
                            公司履行客户告知义务，现将有关事项告知如下，请您认真阅读 确认知悉以下内容：\n 、一请您了解我公司基本情况 \n（一）名称：
                            \n（二）地址 \n（三）业务范围：在全国区域内(港、澳、台除外)代理销售保
                            险产品；代理收取保险费；代理相关保险业务的损失勘察和理赔 中国银保监会批准的其他业务。 \n（四）联系方式：
                            \n（五）我公司为投保人与保险公司订立保险合同提供中介服务， 根据保险监管部门规定及双方合同约定，依法向保险公司收取 用金。
                            \n（六）根据保险监管部门规定，我司高级管理人员在任职前均取 中国银保监会派出机构核准的任职资格我公司
                        </text>
                    </view>
                </scroll-view>
                <view class="btn flex justify-center" @click="showPopup = !showPopup">
                    <button class="cu-btn bg-red text-white f52 flex justify-center align-center text-bold btn">我已确认并了解以上内容</button>
                </view>
            </view>
        </u-popup>
        <!-- 保险公司介绍 -->
        <u-popup v-model="showPopupOne" mode="bottom" border-radius="14" length="80%" :closeable="true">
            <view class="box padding flex flex-direction align-center ">
                <text class="text-bold text-black f53 ">保险公司介绍</text>
                <view class="imagee bg-img ww100 h320  mt50 flex justify-center align-center">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210607105638.png" mode="aspectFill" class="w553 h152"></image>
                </view>

                <scroll-view scroll-y="true" class="" style=" height: 75%;">
                    <view class="f45 text-black mt50">
                        <text>
                            白年人寿保险股份有限公司于2009年6月3日止式业，忌部 址大连，是东北地区首家中资寿险法人机构。公司注册资本
                            7.948亿元，十年累计实现保费收入超过1400亿元，总资产突 破千亿元，价值与规模、品质和效益同步提升，连续四年实现
                            利，从寿险到资管，健康而快速的发展备受行业瞩目。百年人 寿坚持价值导向和结构调整，采取多元化销售发展策略，陆续
                            立井行发展个险、银行保脸、创新销售、电话销售、顾问行 销等业务果道，互联网金融和健康管理服务多领域创新发展。
                            年间百年人寿已在全国开设21家省级分公司，累计拥有各级 支机构390余家，全国主要省市战路布局已基本完成，销售 体系日益完姜。 \n
                            百年人寿通过“以客户为中心”战略始终致力于为社会大众 提供优质的保险产品和服务，便捷高效的操作体验，尖端前沿的
                            医疗支持，持续升级的特色服务，更好地满足了客户对于保险保 的全面需求，为超过2000万客户提供寿险保障服务。百年人寿
                            获人身险公司服务评价A类评级，\n 标志着服务已经进入行业 凭借优异的市场表现，百年人寿连续被评为行业最具发展
                            力和最具成长性的保险公司、最佳保险企业和最佳责任典范公 同；连续四年荣膺“年度中国价值成长性十佳寿险公司”，公司
                            产品创新亮点频出，多项产品获得行业大奖行业地位和品牌知 名度显著提升。
                        </text>
                    </view>
                </scroll-view>
            </view>
        </u-popup>
        <u-popup v-model="showPopupjia" mode="bottom" border-radius="14" length="50%" :closeable="true" @close="close">
            <view class=" padding flex flex-direction align-center " v-if="!showPopupflg">
                <text class="text-bold text-black f53 ">保险条款及告知</text>
                <scroll-view scroll-y="true" class="" style="height: 30%;" @click="showPopupflg = !showPopupflg">
                    <view class="flex solid-bottom padding-tb-sm align-center justify-between">
                        <text class="text-purple">《投保须知》</text>
                        <i class="cuIcon-right"></i>
                    </view>
                    <view class="flex solid-bottom padding-tb-sm align-center justify-between" @click="showPopupflg = !showPopupflg">
                        <text class="text-purple">《投保须知》</text>
                        <i class="cuIcon-right"></i>
                    </view>
                </scroll-view>
            </view>

            <view class=" padding flex flex-direction align-center  u-relative" v-else>
                <text class="text-bold text-black f53   flex justify-center ">
                    <i class="cuIcon-back ret" @click="showPopupflg = !showPopupflg"></i>
                    兴泰如意互保利益重大疾病保险条款
                </text>
                <scroll-view scroll-y="true" class=" flex justify-center" style="height: 40vh;width: 80vw;">
                    <image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210611133353.jpg" mode="widthFix" class=""></image>
                </scroll-view>
            </view>
        </u-popup>

        <!-- 保险条款 -->
        <u-popup v-model="showPopupIns" mode="bottom" border-radius="14" length="80%" :closeable="true">
            <view class="box padding flex flex-direction align-center ">
                <text class="text-bold text-black f53 ">信泰如意护保益重大疾病保险条款</text>
            </view>
        </u-popup>
        <yy-login v-if="vuex_login"></yy-login>
        <yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
export default {
    data() {
        return {
            // /showPopupIns
            showPopup: false,
            showPopupIns: false,
            showPopupOne: false,
            showPopupjia: false,
            showPopupflg: false,
            seeMore: false,
            field: {
                backgroundColor: '#000',
            },
            c: 0,
            listThree: [
                {
                    a: 'Q:这个产品对被保险人职业有要求吗？',
                    b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。',
                },
                {
                    a: 'Q:这个产品对被保险人职业有要求吗？',
                    b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。',
                },
                {
                    a: 'Q:这个产品对被保险人职业有要求吗？',
                    b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。',
                },
                {
                    a: 'Q:这个产品对被保险人职业有要求吗？',
                    b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。',
                },
                {
                    a: 'Q:这个产品对被保险人职业有要求吗？',
                    b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。',
                },
                {
                    a: 'Q:这个产品对被保险人职业有要求吗？',
                    b: 'A:您好，本产品被保险人年龄为出生28天—55周岁，从事1-4 类职业，能正常工作或生活的人士。',
                },
            ],
            listOne: [
                {
                    a: '保障时间 ',
                    b: '至70岁/终身',
                },
                {
                    a: ' 适用人群 ',
                    b: '出生满28天—55周岁',
                },
                {
                    a: '可投保城市',
                    b: '浙江、江苏、北京、河北、福建、河南、山东、黑龙江、辽宁、上海、湖北、江西、宁波、广东、 青岛、深圳、大连',
                },
                {
                    a: '犹豫期 ',
                    b: '15天',
                },
                {
                    a: '交费年限',
                    b: '一次性交清/5年/10年/15年/20年/30年',
                },
            ],
            list: [
                {
                    a: '110种重大疾病保险金',
                    b: '最高45万',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
                {
                    a: '重度恶性肿瘤关爱保险金                                  ',
                    b: '最高30%基本保额',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
                {
                    a: '55种轻症及轻症豁免                                          ',
                    b: '最高40%基本保额',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
                {
                    a: '25种中症及中症豁免',
                    b: '最高75%基本保额',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
                {
                    a: '25种中症及中症豁免',
                    b: '最高75%基本保额',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
                {
                    a: '最高75%基本保额',
                    b: '150%基本保额',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
                {
                    a: '特定心脑血管疾病扩展保险金（可选）             ',
                    b: '150%基本保额',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
                {
                    a: '身故或全残保险金（可选）                  ',
                    b: '累计已交保费/基本保额',
                    c: '等待期 90天，被保险人60周岁前初次确诊重大疾病，额外赔付80%基 本保额；',
                },
            ],
        };
    },
    onShow() {},
    onLoad(e) {
        // 下载pdf
    },
    methods: {
        async downloadPdf() {
            uni.downloadFile({
                url: 'https://img.ymcube.com/uploads/videos/2021/03/22/9f35dacc5e07993fc5e48285f136bf5d.pdf',
                success: function(res) {
                    console.log('res :>> ', res);
                    var filePath = res.tempFilePath;
                    uni.openDocument({
                        filePath: filePath,
                        success: function(res) {
                            console.log('打开文档成功');
                        },
                    });
                },
            });
        },
        async click(e) {
            console.log('e :>> ', e);
            this.c = e;
        },
        async close() {
            console.log('111 :>> ', 111);
            this.showPopupflg = false;
        },
    },
};
</script>

<style lang="scss" scoped>
.ret {
    position: absolute;
    left: 32.12rpx;
    top: 32.12rpx;
    // transform: translateY(-50%);
}
.page_box {
    .box {
        width: 100vw;
        height: 80vh;
        .btn {
            width: 639.15rpx;
            height: 68.07rpx;
        }
        .scroll {
            width: 100%;
            height: 62%;
        }
        .imagee {
            background-image: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/20210607105218.png);
        }
    }

    .content_box {
        .img {
            position: absolute;
            right: 0;
            bottom: 6rpx;
            background-image: url(https://i.loli.net/2021/06/04/xpUWTPH1BtlgGo8.png);
        }

        .hen {
            background: #d2d0d0;
        }
        @mixin name {
            width: 100vw;
            image {
                width: 100vw;
                height: 100%;
            }
        }
        .imgOne {
            @include name;
            height: 769.95rpx;
            // height:800.95rpx;
        }
        .imgTwo {
            @include name;
            height: 801.6rpx;
        }
        .imgThree {
            @include name;
            height: 1368rpx;
        }
        .imgFour {
            @include name;
            height: 517.8rpx;
        }
        .imgFive {
            @include name;
            height: 1122.6rpx;
        }
        .imgSix {
            @include name;
            height: 1876.2rpx;
        }
        .imgSeven {
            @include name;
            height: 1805.4rpx;
        }
        .imgEight {
            @include name;
            height: 843.6rpx;
        }
        .imgnine {
            @include name;
            height: 699.6rpx;
        }
        .imgten {
            @include name;
            height: 864.6rpx;
        }
        .imgeleven {
            @include name;
            height: 1696.2rpx;
        }
        .imgg {
            background-image: url(https://i.loli.net/2021/06/04/6wsOpan1CTDPcMI.png);
        }
        .center {
            width: 370.2rpx;
            height: 42rpx;
            border-radius: 0 0 12rpx 12rpx;
            background-color: #fea24b;
            color: #ffffff;
            font-weight: 600;
        }
        .commonProblem {
            padding: 30.6rpx;
        }
        .soli {
            border: 2rpx solid red;
        }
        .footer {
            position: fixed;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            border-top: 0.6rpx solid #cccccc;
            .left {
                width: 120.6rpx;
                height: 100%;
                border-right: 0.6rpx solid #cccccc;
            }
            .right {
                .reddx {
                    border: 0.6rpx solid #e34545;
                    border-radius: 36rpx;
                    overflow: hidden !important;
                }
                .line {
                    line-height: 67.2rpx;
                }
            }
        }
    }
}
</style>
